<template>
	<div>
        <div class="aside-item login">
            <div class="content">
                <h3>CNode：Node.js专业中文社区</h3>
                您可以 <router-link to="/login">登录</router-link> 或 <router-link to="/signup">注册</router-link> , 也可以
                <button class="btn btn-default">通过 Github 登录</button>
            </div>
        </div>

        <div class="aside-item ad">
            <div class="content">
                <a href="https://0x7.me/UDyj" target="_blank"><img src="//dn-cnode.qbox.me/Fv9R31Y6ySKKJi95ldk9TRkJ7o5O"></a>
                <a href="https://www.aliyun.com/product/nodejs?ref=cnode" target="_blank"><img src="//dn-cnode.qbox.me/Fn4D6BhOTz1IswvmzeZ1q7QW1ls_"></a>
                <a href="https://render.alipay.com/p/s/taobaonpm_click/image_click_25" target="_blank"><img src="https://render.alipay.com/p/s/taobaonpm_click/image_25"></a>
                <a href="https://www.ucloud.cn/site/active/gift.html?utm_source=cnodejs&utm_medium=content_pic_pc_540_130&utm_campaign=huodong&utm_content=gift&ytag=cnodejs" target="_blank"><img src="//dn-cnode.qbox.me/FlajCCXkxZaOsuWp3k0iaiqfrJaS"></a>
            </div>
        </div>


        <div class="aside-item ad nobody">
            <p class="title">无人回复的话题</p>
            <div class="content">
                <p v-for="(item,index) in noreplyList" :key="index">
                    <span v-if="item.reply_count == 0"><router-link :to="{name:'detail',params:{id:item.id}}">{{item.title}}</router-link></span>
                </p>
            </div>
        </div>
        
        <div class="aside-item ad frendlink">
            <p class="title">友情链接</p>
            <div class="content">
                <a href="https://ruby-china.org/" target="_blank">
                    <img src="../static/ruby-china-20150529.png">
                </a>
                <a href="http://golangtc.com/" target="_blank">
                    <img src="../static/golangtc-logo.png">
                </a>
                <a href="http://phphub.org/" target="_blank">
                    <img src="../static/phphub-logo.png">
                </a>
                <a href="https://testerhome.com/" target="_blank">
                    <img src="//dn-cnode.qbox.me/FjLUc7IJ2--DqS706etPQ1EGajxK">
                </a>
            </div>
        </div>


        <div class="aside-item erweima">
            <p class="title">客户端二维码</p>
            <div class="content">
                <img width="200" src="//dn-cnode.qbox.me/FtG0YVgQ6iginiLpf9W4_ShjiLfU">
                <p><a href="https://github.com/soliury/noder-react-native" target="_blank">客户端源码地址</a></p>
            </div>
        </div>
        <div class="aside-item login"></div>
	</div>
    
</template>

<script>
export default {
	name:'Aside',
	data(){
		return{
            noreplyList:this.noreply,
            isIndex:false,
            isLogin:false,
            isAbout:false,
            isDetail:false
		}
    },
    props:['noreply'],
	methods:{

    }
}
</script>

<style scoped>
.aside-item{width:100%;border-radius:2px;background:#fff;margin-bottom:13px;box-sizing:border-box;}
.aside-item .content{padding:10px;}
.title{background:#f6f6f6;width:100%;padding: 10px 10px;box-sizing:border-box;color:#444;border-radius:2px 2px 0 0;}
.login{color:#333;line-height:1.6rem;}
.login a{color:#778087}
.login h3{line-height:1rem;font-weight:normal;font-size:1em;color:#000;}
.login button{margin:8px 0 0;}
.ad a{height:100%;display:block;margin-bottom:10px;}
.ad a:last-child{margin-bottom:0}
.ad a img{width:100%;}

.nobody .content p a{width:100%;line-height: 2rem; color: #778087;text-overflow:ellipsis;overflow: hidden; white-space: nowrap;display: block;}

.frendlink a img{width:150px;}
.erweima .content{text-align: center;}
.erweima .content a{color:#778087;}
.erweima .content a:hover{text-decoration:underline;}


</style>